import { useRequest } from 'ahooks'
import { Typography } from 'antd'
import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { getComponentConfByType } from '../../../components/QuestionComponents'
import { getComponentStatService } from '../../../services/stat'

interface PropsType {
  selectedComponentId: string
  selectedComponentType: string
  setSelectedComponentId: (id: string) => void
  setSelectedComponentType: (id: string) => void
}

const ChartStat: React.FC<PropsType> = ({
  selectedComponentId,
  selectedComponentType,
  // setSelectedComponentId,
  // setSelectedComponentType,
}) => {
  const { id } = useParams()
  const [stat, setStat] = useState([])
  const { run } = useRequest(
    async (questionId, componentId) => await getComponentStatService(questionId, componentId),
    {
      manual: true,
      onSuccess: ({ stat }) => {
        setStat(stat)
      },
    }
  )

  useEffect(() => {
    if (selectedComponentId) {
      run(id, selectedComponentId)
    }
  }, [selectedComponentId, id])

  const genStatElem = () => {
    if (!selectedComponentId) {
      return <div>未选中组件</div>
    }

    const { StatComponent } = getComponentConfByType(selectedComponentType) || {}
    if (!StatComponent) return <div>该组件无统计图表</div>

    return <StatComponent stat={stat} />
  }

  return (
    <>
      <Typography.Title level={3}>图表统计</Typography.Title>
      <div>{genStatElem()}</div>
    </>
  )
}

export default ChartStat
